.xterm {
	cursor: text;
	position: relative;
	user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
	outline: none;
}

.xterm .xterm-helpers {
	position: absolute;
	top: 0;
	/**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
	z-index: 5;
}

.xterm .xterm-helper-textarea {
	padding: 0;
	border: 0;
	margin: 0;
	/* Move textarea out of the screen to the far left, so that the cursor is not visible */
	position: absolute;
	opacity: 0;
	left: -9999em;
	top: 0;
	width: 0;
	height: 0;
	z-index: -5;
	/** Prevent wrapping so the IME appears against the textarea at the correct position */
	white-space: nowrap;
	overflow: hidden;
	resize: none;
}

.xterm .composition-view {
	background: #000;
	color: #fff;
	display: none;
	position: absolute;
	white-space: nowrap;
	z-index: 1;
}

.xterm .composition-view.active {
	display: block;
}

.xterm .xterm-viewport {
	/* On OS X this is required in order for the scroll bar to appear fully opaque */
	background-color: #000;
	overflow-y: scroll;
	cursor: default;
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	/*bottom: 0;*/
	bottom: -45px;
	
}
.xterm .xterm-viewport::-webkit-scrollbar {
    width: 12px;
    height: 8px;
    border-radius: 3px;
}

.xterm .xterm-viewport::-webkit-scrollbar-thumb {
    border-radius: 0;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #666;
    border-radius: 4px;
    transition: all 1s;
}

.xterm .xterm-viewport:hover::-webkit-scrollbar-thumb {
    background: #aaa;
}

.xterm .xterm-viewport::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: #222;
    border-radius: 4px;
    transition: all 1s;
}

.xterm .xterm-viewport:hover::-webkit-scrollbar-track {
    background-color: #444;
}

.xterm .xterm-screen {
	position: relative;
}

.xterm .xterm-screen canvas {
	position: absolute;
	left: 0;
	top: 0;
}

.xterm .xterm-scroll-area {
	visibility: hidden;
}

.xterm-char-measure-element {
	display: inline-block;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: -9999em;
	line-height: normal;
}

.xterm.enable-mouse-events {
	/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
	cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
	cursor: pointer;
}

.xterm.column-select.focus {
	/* Column selection mode */
	cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 10;
	color: transparent;
}

.xterm .live-region {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.xterm-dim {
	opacity: 0.5;
}

.xterm-underline {
	text-decoration: underline;
}

.xterm-strikethrough {
	text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-decoration-overview-ruler {
	z-index: 7;
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
}

.xterm-decoration-top {
	z-index: 2;
	position: relative;
}

body,
html {
	font-family: helvetica, sans-serif, arial;
	font-size: 1em;
	background-color: rgb(0, 0, 0);
	color: rgb(240, 240, 240);
	height: 100%;
	margin: 0;
	overflow-x: hidden;
}
#header {
    padding: 0 80px 0 20px;
    height: 38px;
    line-height: 42px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    background-color: #f8f8f8;
	/*display: none;*/
}
.box {
	display: block;
	height: 100%;
}
#terminal-container {
	display: block;
	width: calc(100% - 1px);
	margin: 0 auto;
	padding: 2px;
	height: calc(100% - 45px);
}
#terminal-container .terminal {
	background-color: #000000;
	color: #fafafa;
	padding: 2px;
	height: calc(100% - 45px);
}
#terminal-container .terminal:focus .terminal-cursor {
	background-color: #fafafa;
}
#bottomdiv {
	position: fixed;
	/*left: 0;*/
	right: 20px;
	bottom: 5px;
	width: 30vw;
	background-color: rgb(0, 0, 0);
	border-color: white;
	border-style: solid none none none;
	border-width: 1px;
	z-index: 99;
	height: 30px;
	line-height:30px;
	border:none;
}
#footer {
	display: inline-block;
	color: rgb(240, 240, 240);
	background-color: rgb(50, 50, 50);
	padding-left: 5px;
	padding-right: 5px;
	border-color: white;
	border-style: none none none solid;
	border-width: 1px;
	text-align: left;
	display:none;
}
#status {
    position: absolute;
    right:0;
	display: inline-block;
	color: rgb(240, 240, 240);
	background-color: rgb(50, 50, 50);
	padding-left: 10px;
	padding-right: 10px;
	border-color: white;
	border-style: none solid none solid;
	border-width: 1px;
	text-align: left;
	z-index: 100;
	height: 20px;
    line-height: 20px;
    font-size: 12px;
    border: none;
    border-radius: 5px;
}
#countdown {
	display: none;
	color: rgb(240, 240, 240);
	background-color: rgb(50, 50, 50);
	padding-left: 10px;
	padding-right: 10px;
	border-color: white;
	border-style: none solid none solid;
	border-width: 1px;
	text-align: left;
	z-index: 100;
}
#countdown.active {
	display: inline-block;
	animation: countdown infinite alternate 200ms;
}
@keyframes countdown {
	from {
		background-color: rgb(255, 255, 0);
	}
	to {
		background-color: inherit;
	}
}
#menu {
	display: inline-block;
	font-size: 16px;
	color: rgb(255, 255, 255);
	padding-left: 10px;
	z-index: 100;
}
#menu:hover .dropup-content {
	display: block;
}
#logBtn,
#adjustBtn {
	color: #000;
}

.dropup {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.dropup-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	font-size: 16px;
	min-width: 160px;
	bottom: 18px;
	z-index: 101;
}
.dropup-content a {
	color: #777;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.dropup-content a:hover {
	background-color: #ccc;
}
.dropup:hover .dropup-content {
	display: block;
}
.dropup:active .dropup-content {
	display: block;
}
.dropup:hover .dropbtn {
	background-color: #3e8e41;
}
